<template>
  <div class="detail">
    <el-form
      ref="postForm"
      :model="postForm"
      :rules="rules"
      label-position="right"
      label-width="130px"
    >
      <div class="form-data">
        <el-form-item label="付款金额" prop="amount">
          <el-input-number
            v-model="postForm.amount"
            placeholder="付款金额"
            :precision="2"
            :step="0.01"
            :disabled="true"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="退款金额" prop="refund_amount">
          <el-input-number
            v-model="postForm.refund_amount"
            placeholder="退款金额"
            :precision="2"
            :step="0.01"
            :disabled="isRefund"
            :max="postForm.amount"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="用户退款理由" prop="user_application_refund_reason">
          <el-input
            v-model="postForm.user_application_refund_reason"
            type="textarea"
            placeholder="用户退款理由"
            :disabled="true"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="退款理由" prop="refund_desc">
          <el-input
            v-model="postForm.refund_desc"
            type="textarea"
            placeholder="退款理由"
            :disabled="isRefund"
            style="width: 100%"
          />
        </el-form-item>
      </div>

      <sticky :class-name="'sub-navbar'">
        <el-button
          v-loading="loading"
          type="success"
          style="margin-left: 10px"
          :disabled="isRefund"
          @click="submitForm"
        >
          提交
        </el-button>
      </sticky>
    </el-form>
  </div>
</template>

<script>
import Sticky from '@/components/Sticky'
import { getOrderByID, refundOrder } from '@/api/order'

export default {
  name: 'OrderRefundDetail',
  components: { Sticky },
  props: {
    id: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      loading: false,
      isRefund: false,
      postForm: {
        amount: 0,
        refund_amount: 0,
        user_application_refund_reason: '',
        refund_desc: ''
      },
      rules: {
        amount: [
          { required: true, message: '付款金额不能为空' }
        ],
        refund_amount: [
          { required: true, message: '退款金额不能为空' },
          { type: 'number', message: '退款金额格式不正确' },
          { validator: this.validateRefundAmount, trigger: 'change' }
        ]
      }
    }
  },
  methods: {
    submitForm() {
      if (!this.loading) {
        this.loading = true
        this.$refs.postForm.validate((valid, fields) => {
          // console.log(valid, fields)

          // 判断规则是否验证通过
          if (valid) {
            const refund = Object.assign({}, this.postForm)
            refund.id = this.id

            refundOrder(refund).then(response => {
              this.$notify({
                title: '成功',
                message: response.msg,
                type: 'success',
                duration: 2000
              })
              this.$emit('ended')
            }).catch(() => {
              this.loading = false
            })
          } else {
            this.loading = false
            for (const key in fields) {
              if (fields.hasOwnProperty(key)) {
                const element = fields[key]
                this.$message({
                  message: element[0].message,
                  type: 'error',
                  duration: 2000
                })
                return false
              }
            }
          }
        })
      }
    },
    getOrderByID() {
      if (this.id !== 0) {
        getOrderByID(this.id).then(response => {
          if (!response.data || response.data.length === 0) {
            return
          }

          const {
            amount,
            refund_amount,
            user_application_refund_reason,
            refund_desc,
            status
          } = response.data
          this.postForm = {
            amount,
            refund_amount,
            user_application_refund_reason: user_application_refund_reason || '',
            refund_desc
          }

          this.postForm.refund_amount = amount

          if (status === 5 || status === 6 || status === 7 || status === 8) {
            this.$alert('已经发起过退款', '退款提示', {
              confirmButtonText: '确定',
              callback: action => {
                this.$emit('isRefund')
              }
            })
            this.isRefund = true
          }
        })
      }
    },
    toDefault() {
      this.$refs.postForm.resetFields()
      this.isRefund = false
      this.loading = false
    },
    validateRefundAmount(rule, value, callback) {
      if (!value || value === '') {
        callback(new Error('退款金额不能为空'))
      } else if (this.postForm.amount < value) {
        callback(new Error('退款金额不能比支付金额大'))
      } else {
        callback()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
